<template>
	<view class="container">
		<view class="title">
			<img src="/static/common/logo@2x.png" alt="" class="logo">
			<view class="n">拉美购</view>
		</view>
		<view class="choose-btn">
			<view class="c_btn">
				<input type="number" placeholder="请输入您的手机号" maxlength="11" v-model="phone">
			</view>
			<view class="c_btn code">
				<input type="number" placeholder="请输入验证码" maxlength="6" v-model="codeMsg">
				<view class="code_btn noClickBtn" v-if="noClickBtn">{{codeStatus}}</view>
				<view class="code_btn" v-else @click="gotCode">{{codeStatus}}</view>
			</view>
			<button class="c_btn w" @click="save" open-type="getUserInfo" lang="zh_CN">
				登录
			</button>
			<view class="sub" @click="toPrivacy">登录即为同意《拉美购用户协议》和隐私条款</view>
		</view>
	</view>
</template>

<script>
	import {
		_msgCode
	} from '../../common/vmeitime-http/mem.js';
	import {
		_loginPhone
	} from '../../common/vmeitime-http/login.js';
	let _t1 = null;
	export default {
		data() {
			return {
				phone: "",
				codeMsg: "",
				signStatus: false, //认证状态,
				codeStatus: "发送验证码",
				codeTime: 120,
				fullInfo: {
					encry: "",
					iv: ""
				},
				noClickBtn: false
			}
		},
		onLoad() {

		},
		methods: {
			async gotCode() {
				if (this.phone == "" || this.phone.length !== 11) {
					this.$api.msg("请输入正确的手机号")
					return false;
				}
				this.noClickBtn = true;
				setTimeout(() => {
					this.noClickBtn = false;
				}, 3000);
				let t = null;
				let that = this;
				if (this.codeStatus == "发送验证码" || this.codeStatus == "重新发送") {
					let tempData = await _msgCode({
						phone: this.phone
					});
					if (tempData.data.code == 200) {
						this.$api.msg("短信验证码发送成功，请注意查收！")
						this.codeMsg = ""
					} else {
						return false;
					}
					t = setInterval(function() {
						if (that.codeTime == 0) {
							that.codeStatus = "重新发送";
							that.codeTime = 120;
							clearInterval(t);
							return false
						}
						that.codeStatus = "重新发送 " + that.codeTime--;
					}, 1000)
				}
			},
			async save() {
				uni.removeStorageSync('wxUserInfo');
				let that = this;
				if (this.codeMsg == "") {
					this.$api.msg("请填写短信验证码");
					return false
				}
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes);
						// 获取用户信息
						//                            that.wxLoginAll(loginRes)
						that.wxLjust(loginRes)
					}
				});
				//                let para = {
				//                    phone: this.phone,
				//                    authCode: this.codeMsg
				//                };

			},
			async goLogin(n, code) {
				let that = this;
				if ("common") {
					let para = {
						code: code,
						encryptedData: this.fullInfo.encry,
						iv: this.fullInfo.iv,
						phone: this.phone,
						authCode: this.codeMsg
					};
					/*判断是否是退出状态*/
					let authTemp = uni.getStorageSync('authInfo');
					if (authTemp && authTemp !== "") {
						let tempData = await _logout()
						if (tempData.data.code == 200) {
							uni.removeStorageSync('authInfo');
						}
					}
					let tempData = await _loginPhone(para)
					if (tempData.data.code == 200) {
						this.$api.msg("登陆成功！");
						uni.setStorageSync('authInfo', tempData.data.data);
						uni.switchTab({
							url: '/pages/index/index'
						});
					}
				}
			},
			wxLjust(loginRes) {
				let t1 = 0;
				uni.showLoading({
					title: '授权中',
					mask: true
				});
				_t1 = setInterval(() => {
					let tempInfo = uni.getStorageSync('wxUserInfo');
					if (tempInfo && tempInfo !== "") {
						this.goLogin('common', loginRes.code);
						uni.hideLoading()
						clearInterval(_t1)
					} else {
						t1++;
						if (t1 == 50) {
							uni.showModal({
								title: '授权失败',
								content: '登录功能需要您同意小程序授权才能使用哟，登录后您可以快捷购买商品，还能享受专属客服服务，请重新点击微信登录按钮并在弹出的页面中选择‘允许’，或者您可以选择手机号一键登录。',
								showCancel: false,
								confirmText: "知道啦",
								success: function(res) {
									if (res.confirm) {
										//                                    clearInterval(t)
									} else if (res.cancel) {}
								}
							});
							uni.hideLoading()
							clearInterval(t)
						} else {
							this.wxLoginAll()
						}
					}
				}, 200);
			},
			wxLoginAll() {
				let that = this;
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						console.log(infoRes)
						uni.setStorageSync('wxUserInfo', infoRes.userInfo);
						that.fullInfo = {
							encry: infoRes.encryptedData,
							iv: infoRes.iv
						}
						//                            that.goLogin('common',loginRes.code)
					},
					fail: function(fRes) {
						console.log(fRes);
					}
				});
			},
			/*打开隐私条款*/
			toPrivacy() {
				uni.navigateTo({
					url: "/pages/public/privacy"
				})
			}
		},

	}
</script>

<style lang='scss'>
	page {
		background: #fff;
	}

	.container {
		/* padding-top: 115px; */
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #fff;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 40upx;
	}

	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: $font-color-dark;
	}

	.title {
		text-align: center;
		margin-top: 70upx;

		img {
			width: 104upx;
			height: 104upx;
			display: inline-block;
			vertical-align: top;
		}

		.n {
			font-size: 50upx;
			color: #282828;
			font-weight: 500;
			display: inline-block;
			margin-top: 15upx;
			margin-left: 41upx;
		}
	}

	.choose-btn {
		margin-top: 137upx;

		.c_btn {
			width: 630upx;
			height: 98upx;
			/* border:2upx solid rgba(1,127,1,1); */
			margin: auto;
			color: rgba(1, 127, 1, 1);
			/*text-align: center;*/
			font-size: 30upx;
			line-height: 98upx;
			text-align: left;

			input {
				height: 100%;
				background: rgba(246, 246, 246, 1);
				padding-left: 38upx;
				border-radius: 10upx;
				color: #282828;
			}

			;
			margin-bottom: 39upx;
		}

		.w {
			background: rgba(2, 127, 1, 1);
			color: #ffffff;
			margin-bottom: 39upx;
			text-align: center;
			border-radius: 10upx;
		}

		.code {
			margin-bottom: 39upx;

			input {
				width: 386upx;
				display: inline-block;
				margin-right: 20upx;
				vertical-align: top;
			}

			.code_btn {
				width: 224upx;
				display: inline-block;
				text-align: center;
				border: 2upx solid rgba(2, 127, 1, 1);
				border-radius: 10upx;
				height: 94upx;
				line-height: 94upx;
				margin-top: 5upx;
			}
		}
	}

	.sub {
		text-align: center;
		color: #989898;
		font-size: 22upx;
	}
</style>
